<template>
<div class="category">
        <Breadcrumb />
        <div class="wrapper">
            <div class="title">产品类目管理</div>
            <div class="tree">
                <el-button type="warning" style="margin-bottom:20px;margin-left:20px;" @click="addCategory">新增一级导航类目</el-button>
                <!-- 
                    data  tree数据
                    show-checkbox          多选框
                    default-expand-all     是否默认展开所有的节点
                    expand-on-click-node   是否在点击节点的时候展开或者收缩节点 默认为true 
                    render-content         树节点内容区的渲染 function 
                -->
                <el-tree style="margin-left:20px;"  :data="data" show-checkbox node-key="id" default-expand-all 
                    :expand-on-click-node="false" :render-content="renderContent" :props="defaultProps">
                </el-tree>
            </div>
        </div>
        <!-- :dialogVisible="dialogVisible"  -->
        <Dialog :title="title" ref="childDialog" :type="type" :id="id" :cid="cid" @updateViews="updateViews" />
</div>
</template>
<script>
import Dialog from './Dialog.vue'
export default {
    name: "Category",
    components:{
        Dialog
    },
    data() {
    //   const data = [{
    //     id: 1,
    //     label:'一级 1',
    //     children: [{
    //       id: 4,
    //       label:'二级 1-1',
    //     }]
    //   }, {
    //     id: 2,
    //     label: '一级 2',
    //     children: [{
    //       id: 5,
    //       label:'二级 2-1'
    //     }, {
    //       id: 6,
    //       label:'二级 2-2'
    //     }]
    //   }];
      return {
        id:null,
        cid:null,
        title:'',
        type:1,  // 1 新增  2 修改  3 新增一级分类
        //dialogVisible:true,   // 显示弹框
        //data: JSON.parse(JSON.stringify(data)),
        data:[],
        defaultProps:{
            label:'name',
        },
        children:[
          { id:6,name:'热销水果',cid:10011,type:1001},
          { id:7,name:'时令水果',cid:10012,type:1001},
          { id:8,name:'热带水果',cid:10013,type:1001},
          { id:9,name:'鱼类',cid:10021,type:1002},
          { id:10,name:'蟹类',cid:10022,type:1002},
          { id:11,name:'贝类',cid:10023,type:1002},
          { id:12,name:'猪肉',cid:10030,type:1003},
          { id:13,name:'牛肉',cid:10031,type:1003},
          { id:14,name:'羊肉',cid:10032,type:1003},
        ]
      }
    },
    created(){
       this.getGoodsItemCategory()
    },
    methods: {
      updateViews(){
         this.getGoodsItemCategory()
      },
      // 获取产品列表
      async getGoodsItemCategory(){
          let res = await this.$api.getGoodsItemCategory();
          console.log('res7777',res);
          let dataRes = res.data.data.result;
          // 获取一级目录
          let oneArr = [],twoArr = [];
          let otherArr = [];
          dataRes.forEach(ele=>{
             console.log('ele',ele);
             if(ele.type === 1){
                ele.children = [];
                // let obj = {};
                // obj.id = ele.id;
                // obj.label = ele.name;
                oneArr.push(ele)
             }else{
                twoArr.push(ele)
             }
          })
          otherArr = this.children;
          // 继续遍历数组 获取数据结构
          oneArr.forEach(item=>{
            otherArr.forEach(ele=>{
                if(ele.type === item.cid){
                     item.children.push(ele)
                }
             })
          })
          this.data = oneArr;
      }, 
      // 增加一级栏目
      addCategory(){
        this.$refs.childDialog.dialogVisible = true;
        this.title = `新增一级分类`;
        this.type = 3;
        this.$refs.childDialog.input = ''
      },
      // 新增
      append(data) {
         this.$refs.childDialog.dialogVisible = true;
         this.title = `新增【${data.name}】子级分类`;
         this.type = 1;
         this.$refs.childDialog.input = ''
         this.cid = data.cid;
      },
      // 修改
      update(node, data){
         this.$refs.childDialog.dialogVisible = true;
         this.title = `修改【${data.name}】分类名称`;
         this.type = 2;
         this.$refs.childDialog.input = data.name;
         this.id = data.id;
      },
      // 删除
      remove(node, data) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$api.deleteContentCategoryById({id:data.id}).then(res=>{
              if(res.data.status ===200){
                this.$message({
                   type: 'success',
                   message: '删除成功!'
                 });
              }
              this.getGoodsItemCategory()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node" style="display:flex;justify-content: space-between;width:400px;align-items:center;">
            <span class="name">{node.label}</span>
            {
               node.level===1 ? 
               <span>
                    <el-button size="mini"  on-click={ () => this.append(data) } icon="el-icon-plus">新增</el-button>
                    <el-button size="mini"  on-click={ () => this.update(node, data) } icon="el-icon-edit">修改</el-button>
                    <el-button size="mini" type="danger" on-click={ () => this.remove(node, data) } icon="el-icon-delete">删除</el-button>
               </span> :
               <span style="position:relative;left:-18px;">
                    <el-button size="mini"  on-click={ () => this.update(node, data) } icon="el-icon-edit">修改</el-button>
                    <el-button size="mini" type="danger" on-click={ () => this.remove(node, data) } icon="el-icon-delete">删除</el-button>
               </span>
            }
          </span>);
      }
    }
  };
</script>

<style lang="less" scoped>

.category{
    padding-bottom: 20px;
    background-color:#fff;
    .wrapper{
      border-top:1px solid #eee;
      .title{
          padding:10px 0 10px 20px;
      }
      .tree{
        /deep/ .el-tree-node__content{
            margin:6px 0;
            height:auto!important;
         }
      }
    } 
}



</style>